<!-- 数据图 -->
<template>
	<div class="pages-contain">
		<qiun-data-charts :type="type" :opts="mainOpts" :chartData="chartData"/>
		<!-- 自定义卡槽 -->
		<slot></slot>
		<!-- 查看大图 -->
		<div v-if="(width && parseFloat(width) < minWidth) || (height && parseFloat(height) < minHeight)" style="font-size: smaller;margin-bottom: 5px;color: #999;display: flex;align-items: center;" @click="clickBigCharts">
			<IconFont type="quanping" color="#999" size="15"/>
			<span>查看大图</span>
		</div>
		<uni-popup ref="popup" type="center">
			<uni-card :style="{transform: `rotate(${chartsDeg}deg)`}" :title="title" extraIcon="close" @clickExtra="$refs.popup.close()">
				<div class="pages-contain">
					<qiun-data-charts :type="type" :opts="popupOpts" :chartData="chartData"/>
					<!-- 自定义卡槽 -->
					<slot></slot>
				</div>
			</uni-card>
		</uni-popup>
	</div>
</template>

<script>
	
	import main from './'
	// import base from '@/ui/index.vue'
	
	export default {
		// extends: base,
		props: {
			/**
			  	column, // 柱状图
				mount, // 山峰图
				bar, // 条状图
				line, // 折线图
				area, // 区域图
				scatter, // 散点图
				bubble, // 气泡图
				mix, // 混合图
				pie, // 饼状图
				ring, // 圆环图
				rose, // 玫瑰图
				radar, // 雷达图
				arcbar, // 圆弧进度条
				gauge, // 仪表盘图
				funnel, // 漏斗图
				word, // 词云图
				candle, // K线图
				map, // 地图
				// 新版中没有下面三个的演示效果？？？
				tline, // 时间轴折线
				tarea, // 时间轴区域
				demotype, // 自定义图
			 */
			type: {
				type: String,
				required: true
			},
			// 横坐标数据
			categories: Array,
			// 纵坐标数据
			series: {
				type: Array,
				required: true,
			},
			iStyle: Object,
			// 传入的宽度。不传，不会和minWidth去比较
			width: [String, Number],
			// 规定最小的显示宽度。当传入的宽度值小于该值时，将显示查看大图。并且旋转90°，横屏查看
			dWidth: {
				type: [String, Number],
				default: 400
			},
			// 传入的高度。不传，不会和minHeight去比较
			height: [String, Number],
			// 规定最小的显示高度。当传入的高度值小于该值时，将显示查看大图。不旋转
			dHeight: {
				type: [String, Number],
				default: 400
			},
			// 如果不传，就用默认的opts。如果handleOpts，最终将是执行了handleOpts之后的opts
			opts: Object,
			// opts的处理方法。针对只需要修改少部分的情况
			handleOpts: Function,
			// 字体大小，默认13
			fontSize: [String, Number]
		},
		watch: {
			type: {
				immediate: true,
				handler(value) {
					const timer = setTimeout(() => {
						const {chartData, opts, title, minWidth, minHeight} = main.defaultParams[value]
						this.title = title
						if (minWidth) {
							this.minWidth = parseFloat(minWidth)
						}
						if (minHeight) {
							this.minHeight = parseFloat(minHeight)
						}
						const {categories, series, handleOpts, dWidth, dHeight, fontSize} = this
						if (dWidth) {
							this.minWidth = parseFloat(dWidth)
						}
						if (dHeight) {
							this.minHeight = parseFloat(dHeight)
						}
						if (chartData.categories && categories) {
							// 默认数据中有，说明要求必传。如果没传，用默认的
							chartData.categories = categories
						}
						chartData.series = series
						this.chartData = JSON.parse(JSON.stringify(chartData))
						if (this.opts) {
							this.mainOpts = this.opts
						} else {
							this.mainOpts = JSON.parse(JSON.stringify(opts))
						}
						if (fontSize) {
							this.mainOpts.fontSize = parseFloat(fontSize)
						}
						handleOpts && handleOpts(this.mainOpts)
						clearTimeout(timer)
					}, 500)
				}
			},
			categories: {
				handler(value) {
					if (value) { // 不是必填
						this.chartData.categories = JSON.parse(JSON.stringify(value))
					}
				},
				deep: true
			},
			series: {
				handler(value) {
					this.chartData.series = JSON.parse(JSON.stringify(value))
				},
				deep: true
			},
			fontSize(value) {
				this.mainOpts.fontSize = parseFloat(value)
			},
			dWidth(value) {
				this.minWidth = parseFloat(value)
			},
			dHeight(value) {
				this.minHeight = parseFloat(value)
			}
		},
		data() {
			return {
				main,
				// 图形参数
				mainOpts: {},
				chartData: {},
				title: '', // 图形名称
				minWidth: '', // 最低要求的宽度
				minHeight: '', // 最低要求的高度
				// 大图参数
				chartsDeg: 0,
				popupOpts: {}
			}
		},
		methods: {
			// 生成ID
			randomCanvasID() {
				return 'Capfer' + Date.now() + 'QiunUCharts' + parseInt(Math.random() * 10) + parseInt(Math.random() * 10)
			},
			
			// 查看大的数据图
			clickBigCharts() {
				this.chartsDeg = 0
				this.popupOpts = JSON.parse(JSON.stringify(this.mainOpts))
				this.$refs.popup.open()
				const timer = setTimeout(() => {
					clearTimeout(timer)
					if (this.width && parseFloat(this.width) < this.minWidth) {
						this.chartsDeg = 90
					}
				}, 100)
			},
		}
	}
</script>

<style>
	.pages-contain {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>